<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	html{
		height: 100%;
	}
	body{
		background-color: #ccc;
		height: 100%;
	}
		h1{
			font-weight: 40;
			text-align: center;
		}
		.box1{
			margin: 20px auto;
			height: 100%;
			background-color: white;
			width: 1290px;
		}
		img{
			width: 300px;
			height: 300px;
		}
		.box2{
			border:5px solid #ccc;
			float: left;
			margin-left: 10px;
			display: block;
			text-align: left;
		}
		.box2:hover{
			box-shadow:0 5px 10px #ccc; 
			margin: -5px 0 0 10px;
		}
	</style>
</head>
<body>
<div class="box1">
	<h1>图片廊</h1>
	<div class="box2">
		<img src="http://img3.imgtn.bdimg.com/it/u=995981677,1474946618&fm=26&gp=0.jpg"><br>
		765PRO
	</div>
	<div class="box2">
		<img src="http://img3.imgtn.bdimg.com/it/u=995981677,1474946618&fm=26&gp=0.jpg"><br>
		765PRO
	</div>
	<div class="box2">
		<img src="http://img3.imgtn.bdimg.com/it/u=995981677,1474946618&fm=26&gp=0.jpg"><br>
		765PRO
	</div>
	<div class="box2">
		<img src="http://img3.imgtn.bdimg.com/it/u=995981677,1474946618&fm=26&gp=0.jpg"><br>
		765PRO
	</div>
</div>
</body>
</html>